<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
                    home 整体最外面的大框
                    ul 设置 生活家电头部的div
                    再用一个div 包裹主页面的图片 左边两个是静态 右面八张是动态 
                    

                */
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .home {
            width: 1200px;
            /* background-color: aqua; */
            margin: 0 auto;
        }

        .home .shdq {
            width: 100%;
            height: 30px;
            display: flex;
            /* 弹性布局 */
            justify-content: space-between;
            /* 两端对齐 */
            height: 60px;
            line-height: 60px;
            /* 高 和行高     中间对齐 */
        }

        .home .shdq h1 {
            font-size: 22px;
            font-weight: normal;
        }

        .home li {
            float: left;
            margin-right: 25px;
            font-size: 17px;
            position: relative;
            /* 相对定位 */
        }

        li.sa {
            color: orange;
        }

        li.sa::after {
            /* 下划线   这里不会被选中*/
            content: '';
            display: block;
            /* width: 50px; */
            width: 100%;
            height: 2px;
            background-color: orange;
            position: absolute;
            /* 绝对定位 */
            bottom: 20px;
            left: 0;
        }

        .dian {
            /* */
            width: 100%;
            display: flex;
            /*  弹性布局*/
            justify-content: space-between;
            /* 两端对齐 */
        }

        .dian_left {
            width: 300px;
            /* height: 300px; */
            border: 1px solid red;
            box-sizing: border-box;
            /* 计算宽高*/
            padding: 10px;
        }

        .dian_left .dian_left1 {
            width: 100%;
            height: 200px;
            border: 1px solid blue;
        }

        .dian_right {
            width: 800px;
            height: 300px;
            border: 1px solid green;
            display: flex;
            /* 弹性布局 */
            justify-content: space-between;
            /*  两端靠齐*/
            flex-wrap: wrap;
            /* 换行处理*/
        }

        .dian_right div {
            width: 180px;
            height: 145px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="home">
        <!-- 1. 设置最外面的div盒子  -->
        <div class="shdq">
            <!-- 生活电器 头部ul盒子设置 -->
            <h1>生活电器</h1>
            <ul>
                <li class="sa">扫地机</li>
                <li>空净</li>
                <li>清洁</li>
                <li>风扇</li>
            </ul>
        </div>

        <div class="dian">
            <!-- 头部下面的包裹图片的大盒子 -->
            <div class="dian_left">
                <!-- 左边的两张静态图片 （上下排列） -->
                <div class="dian_left1"></div>
                <div class="dian_left1"></div>
            </div>
            <div class="dian_right">
                <!-- 右边八张动态图片 横向排 -->
                <div>
                    <!-- <img src="" alt=""> -->
                    <!-- <span></span>
                    <i></i>
                    <span></span> -->
                </div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>

    <div class="box">

    </div>
    <script src="a.js"></script>
    <script>
        let dian_rights = document.querySelectorAll('.dian_right>div'); // 查询右边图片内的div
        console.log(dian_rights);
        for (let i = 0; i < dian_rights.length; i++) {
            // dian_rights[0].children = arr[0].data[0].url;
            console.log(arr[0].data[0].url);
            let img = `<img src = ${arr[0].data[0].url}>`;
            dian_rights[i].innerHTML = img;
        }

        /* 
        需求：
          点击按钮，点击谁，谁变色，其余的按钮颜色清空
        排他思想: 先清空所有， 留下我自己
        */
        let lis = document.querySelectorAll('li'); // 查询li标签

        for (let i = 0; i < lis.length; i++) {
            // 给每个按钮绑定点击事件
            lis[i].onmouseover = function () { // onmouseover 鼠标移上
                // 先清空所有按钮的背景
                for (let j = 0; j < lis.length; j++) {
                    lis[j].className = ''; // 
                }
                //  留下我自己
                this.className = 'sa';
            }

        }
    </script>
</body>

</html>